<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>猫狗日记</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="./static/css/layui.css" rel="stylesheet">
    <link rel="shortcut icon" href="./static/images/favicon.png">
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black">logo 区域</div>
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
                <!-- 移动端显示 -->
                <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                    <i class="layui-icon layui-icon-spread-left"></i>
                </li>
                <li class="layui-nav-item layui-hide-xs"><a href="./index.html">首页</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="./about-pet.html">关于宠物</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="./pet-cat-dog.html">宠物猫狗</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="./pet-news.html">宠物新闻</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="./buy-pet/index.html">宠物购买</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="./pet-snacks.html">宠物零食</a></li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                    <a href="javascript:;">
                        <img src="./static/images/user/avatar.jpeg" class="layui-nav-img">
                        纳美
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">个人信息</a></dd>
                        <dd><a href="javascript:;">退出</a></dd>
                    </dl>
                </li>
            </ul>
        </div>

        <div class="layui-body"
            style="left: 0; background-image: url('./static/images/联系我们.jpg');background-size: cover;width: 100%;">
            <div class="layui-container" style="margin-top: 200px;">

                <form class="layui-form" action="" style="width: 900px;">

                    <div class="layui-form-item">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-block">
                            <input style="background-color: rgba(255, 255, 255, 0.4);" type="text" name="name" required
                                lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <input type="radio" name="gender" value="男" title="男" checked>
                            <input type="radio" name="gender" value="女" title="女">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">联系方式</label>
                        <div class="layui-input-block">
                            <input style="background-color: rgba(255, 255, 255, 0.4);" type="text" name="contact"
                                required lay-verify="required" placeholder="请输入联系方式" autocomplete="off"
                                class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-block">
                            <input style="background-color: rgba(255, 255, 255, 0.4);" type="email" name="email"
                                required lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">留言</label>
                        <div class="layui-input-block">
                            <textarea style="background-color: rgba(255, 255, 255, 0.4);" name="message"
                                placeholder="请输入留言" class="layui-textarea"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="primary" class="layui-btn" lay-on="test-msg-dark">提交</button>
                        </div>
                    </div>

                </form>

            </div>
        </div>

        <div class="layui-footer" style="text-align: center;left: 0;">
            cat and dog dairy &copy; 2024 created by Wzy
        </div>
    </div>

    <script src="./static/layui.js"></script>
    <script>
        document.querySelector('form').addEventListener('submit', function (event) {
            event.preventDefault(); // 阻止表单的默认提交行为
        });
        //侧边固定栏
        layui.use(function () {
            var util = layui.util;
            // 自定义固定条
            util.fixbar({
                bars: [
                    {
                        // 定义可显示的 bar 列表信息 -- v2.8.0 新增
                        type: "share",
                        icon: "layui-icon-share",
                        style: "background-color: #16b777;",
                        content: "分享",
                    },
                    {
                        type: "help",
                        icon: "layui-icon-help",
                        content: "帮助",
                    },
                    {
                        type: "cart",
                        icon: "layui-icon-cart",
                        style: "background-color: #FF5722;",
                        content: "购物车",
                    },
                ],
                on: {
                    mouseenter: function (type) {
                        const typesMap = {
                            share: "分享给朋友",
                            help: "帮助",
                            cart: "购物车",
                        }
                        layer.tips(typesMap[type], this, {
                            tips: 4,
                            fixed: true,
                        });
                    },
                    mouseleave: function (type) {
                        layer.closeAll("tips");
                    },
                },
                // 点击事件
                click: function (type) {
                    console.log(this, type);
                    // layer.msg(type);
                },
            });
        });

        // 提交form
        layui.use(function () {
            var layer = layui.layer;
            var util = layui.util;
            util.on('lay-on', {
                "test-msg-dark": function () {
                    layer.msg('深色提示框的示例');
                },
            })

            // 监听提交
            form.on('submit(formContact)', function (data) {
                layer.msg('收到你的消息了!', { time: 3000 });
            });
        });

    </script>
</body>

</html>